<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>视频</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/clappr@latest/dist/clappr.min.js"></script>


    <link href="/lib/video-js.css" rel="stylesheet"/>
    <script src="/lib/video.js" type="text/javascript"></script>

    <!-- <link href="http://vjs.zencdn.net/vjs-version/video-js.css" rel="stylesheet"> -->

    <!--<link type="text/css" rel="stylesheet" href="http://vjs.zencdn.net/5.4.4/video-js.css"/>-->
    <!--<script src="http://vjs.zencdn.net/5.4.4/video.js"></script>-->


    <script src="/lib/jquery-2.1.4.min.js"></script>
    <script src="/lib/socket.io.js"></script>
    <script src="/lib/underscore-min.js"></script>
    <script src="/js/app.js"></script>

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="/lib/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="/lib/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="/lib/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<link rel="stylesheet"
  href="/lib/animate.min.css">


    <style type="text/css">
        ::-webkit-scrollbar{
            display:none;
        }
    .vjs-default-skin.vjs-paused .vjs-big-play-button
    {
        display: none;
    }

        .rotate {
            -webkit-transform: rotate(-90deg);
            -moz-transform: rotate(-90deg);
            -ms-transform: rotate(-90deg);
            -o-transform: rotate(-90deg);
            transform: rotate(-90deg);

            /* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */
            -webkit-transform-origin: 50% 50%;
            -moz-transform-origin: 50% 50%;
            -ms-transform-origin: 50% 50%;
            -o-transform-origin: 50% 50%;
            transform-origin: 50% 50%;

            /* Should be unset in IE9+ I think. */
            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
        }

        .videoDesc{
            color:white;
            position:absolute;
            right:0pt;
            top:0pt;
            bottom:0pt;
            font-family: "楷体","楷体_GB2312";
            font-size:80pt;
            padding-top:300pt;
        }
    </style>



</head>
<body style="background-color: black;padding:0;margin:0;">
<div style="padding-left:125pt;">
    <img id = "cover" src="http://localhost:8088/res-img/cover.jpeg" width="1067"  height="800" ></img>
</div>
<video id="video1"  class="video-js vjs-default-skin" preload='auto' width="1400" height="777" data-setup='{ }'>
</video>

<video id="video2" class="video-js vjs-default-skin" preload='auto' width="1400" height="777" data-setup='{ }'>
</video>
<video id="video3" class="video-js vjs-default-skin" preload='auto' width="1400" height="777" data-setup='{ }'>
</video>

<video id="video4" class="video-js vjs-default-skin" preload='auto' width="1400" height="777" data-setup='{ }'>
</video>

<video id="video5" class="video-js vjs-default-skin" preload='auto' width="1400" height="777" data-setup='{ }'>
</video>

<video id="video6" class="video-js vjs-default-skin" preload='auto' width="1400" height="777" data-setup='{ }'>
</video>
<video id="video7" class="video-js vjs-default-skin" preload='auto' width="1400" height="777" data-setup='{ }'>
</video>
<video id="video8" class="video-js vjs-default-skin" preload='auto' width="1400" height="777" data-setup='{ }'>
</video>

<!--<video id="video10" class="video-js vjs-default-skin center-block" preload='auto' autoplay="autoplay" width="1650" height="900" data-setup='{ }'>-->
<!--</video>-->
<!--<video id="video11" class="video-js vjs-default-skin center-block" preload='auto' autoplay="autoplay" width="1650" height="900" data-setup='{ }'>-->
<!--</video>-->
<!--<video id="video12" class="video-js vjs-default-skin center-block" preload='auto' autoplay="autoplay" width="1650" height="900" data-setup='{ }'>-->
<!--</video>-->

<div id="videoDesc" class="rotate videoDesc" style="background-color:transparent;">

</div>
<script>


var currentVideoIndex = -1;
var playerArray = new Array();
var playerDurationArray = new Array();

var socket =  io.connect(ServerUrl);

var VIDEO_HELLO = 0;
var VIDEO_NEUTRAL = 1;
var VIDEO_HAPPINESS = 2;
var VIDEO_ANGER = 3;
var VIDEO_FEAR = 4;
var VIDEO_SURPRISE = 5;
var VIDEO_SADNESS = 6;
var VIDEO_DISGUST = 7;

// var VIDEO_TWO_PERSON = 8;
// var VIDEO_THREE_PERSON = 9;
// var VIDEO_FOUR_PERSON = 10;
// var VIDEO_FIVE_PERSON = 11;

var noPeopleRoundCount = 0;

socket.on('connect', function() {
    console.log("Client has connected to the server!");
});

socket.on('next-round', function(data) {
    console.log("next-round");
    //$("#cover").show();
    $("#videoDesc").hide();
});

socket.on('start', function() {
    console.log("play start!");
    playVideo(VIDEO_HELLO);
});

socket.on('face', function(data) {
    console.log("face");
    faceProcess(data);
});

socket.on('mosaic', function(data) {

});

socket.on('disconnect', function() {
    console.log("The client has disconnected!");
});

socket.on('play-video', function(data) {
    console.log("play-video " + data.index);

});

function sendDisconnect() {
    socket.disconnect();
}


var faceProcessCount = 0;
function faceProcess(data) {

    faceProcessCount += 1;

    console.log(data);
    if(data == null)
        return;

    var faces = data.result.faces;

    if(faces.length == 0){
       // $("#cover").show();
        return;
    }

    var faceCount = faces.length > FaceCount ? FaceCount : faces.length;

    var emotionSet = new Set();
    for(var i = 0; i < faceCount; ++i){
        var emotion = faces[i].attributes.emotion;

        var expression = faces[i].expression;

        if(expression == "surprise"){
            emotionSet.add(VIDEO_SURPRISE);
        }
        else if(expression == "happiness"){
            emotionSet.add(VIDEO_HAPPINESS);
        }
        else if(expression == "neutral"){
            emotionSet.add(VIDEO_NEUTRAL);
        }
        else if(expression == "sadness"){
            emotionSet.add(VIDEO_SADNESS);
        }
        else if(expression == "disgust"){
            emotionSet.add(VIDEO_DISGUST);
        }
        else if(expression == "anger"){
            emotionSet.add(VIDEO_ANGER);
        }
        else if(expression == "fear"){
            emotionSet.add(VIDEO_FEAR);
        }
    }


    var list = Array.from(emotionSet);
    console.log(list);
    if(list.length == 0){
        console.log("no good face");
        //socket.emit('play-finish', {});
        return;
    }

    for(var i = 0 ;i < playerArray.length; ++i){
        $("#video" +(i+1)).hide();
    }
    $("#cover").hide();
    $("#videoDesc").show();


    playVideoList(list,0,faceProcessCount);
}

function playVideoList(list,index,fpCount){

    if(faceProcessCount != fpCount){
        console.log("not equal , stop fpcount " + faceProcessCount);
        return;
    }

    currentVideoIndex = list[index];

    if( index == list.length ){
        console.log("play finish!");
        socket.emit('play-finish', {});
        $("#video" +(currentVideoIndex+1)).hide();
        $("#cover").show();
        return;
    }


    $("#video" +(currentVideoIndex+1)).show();
    playerArray[currentVideoIndex].load();
    playerArray[currentVideoIndex].play();

    $("#videoDesc").text(getVideoDesc(currentVideoIndex));

    var timerCount = setTimeout(function(){
        console.log("currentVideoIndex " + currentVideoIndex +" has play over");
        $("#video" +(currentVideoIndex+1)).hide();
        clearTimeout(timerCount);
        socket.emit('play-video', {index:currentVideoIndex});

        playVideoList(list,index+1,fpCount)

    },playerDurationArray[currentVideoIndex]*1000);
}

function getVideoDesc(emotion){
    var emotionText = "";
    switch(emotion){
        case VIDEO_SURPRISE:emotionText = "惊 讶";break;
        case VIDEO_HAPPINESS:emotionText = "高 兴";break;
        case VIDEO_NEUTRAL:emotionText = "平 静";break;
        case VIDEO_SADNESS:emotionText = "伤 心";break;
        case VIDEO_DISGUST:emotionText = "厌 恶";break;
        case VIDEO_ANGER:emotionText = "生 气";break;
        case VIDEO_FEAR:emotionText = "害 怕";break;
    }
    return emotionText;
}

function playVideo(index){
     if(currentVideoIndex == index){
         return;
     }

    currentVideoIndex = index;
    $("#cover").hide();
    for(var i = 0 ;i < playerArray.length; ++i){
        if(i == index){
            $("#video" +(index+1)).show();

            playerArray[index].load();
            playerArray[index].play();
        }else{
            $("#video" +(i+1)).hide();
        }
    }
}

function loadVideo(name,index,url,duration){

    playerDurationArray[index] = duration;

    videojs(name).ready(function () {
        playerArray[index] = this;

        // playerArray[index].on('play', function () {
        //     console.log('开始/恢复播放');
        // });
        // playerArray[index].on('pause', function () {
        //     console.log('暂停播放');
        // });
        // playerArray[index].on('ended', function () {
        //     console.log('结束播放');
        //
        //     if(index == currentVideoIndex){
        //         isProcessingFace = false
        //         $("#video" +(index+1)).hide();
        //         $("#cover").show();
        //         currentVideoIndex = -1;
        //     }
        // });

        playerArray[index].on('ended', function () {
            console.log('结束播放 ' + index);

            if(index == VIDEO_HELLO && currentVideoIndex == VIDEO_HELLO){
                console.log("hello reload");
                $("#cover").show();
                currentVideoIndex = -1;
            }
        });


        playerArray[index].src({type: 'video/mp4', src: url});
        playerArray[index].load();

        playerArray[index].play();
    });



}


(function ($) {
        $(document).ready(function () {
            // An example of playing with the Video.js javascript API
            // Will start the video and then switch the source 3 seconds latter
            // You can look at the doc there: http://docs.videojs.com/docs/guides/api.html

            loadVideo("video1",VIDEO_HELLO,ResVideoUrl + "hello.mp4",7);
            loadVideo("video2",VIDEO_NEUTRAL,ResVideoUrl + "neutral.mp4",12);
            loadVideo("video3",VIDEO_HAPPINESS,ResVideoUrl + "happiness.mp4",7);
            loadVideo("video4",VIDEO_ANGER,ResVideoUrl + "anger.mp4",6);
            loadVideo("video5",VIDEO_FEAR,ResVideoUrl + "fear.mp4",9);
            loadVideo("video6",VIDEO_SURPRISE,ResVideoUrl + "surprise.mp4",11);
            loadVideo("video7",VIDEO_SADNESS,ResVideoUrl + "sadness.mp4",12);
            loadVideo("video8",VIDEO_DISGUST,ResVideoUrl + "disgust.mp4",9);

        });
    })(jQuery);


//     setTimeout(function () {
//         $("#cover").hide();
//         var emotionSet = new Set();
//         emotionSet.add(VIDEO_HELLO);
//         emotionSet.add(VIDEO_NEUTRAL);
//         emotionSet.add(VIDEO_HAPPINESS);
//         emotionSet.add(VIDEO_ANGER);
//         emotionSet.add(VIDEO_FEAR);
//         emotionSet.add(VIDEO_SURPRISE);
//         emotionSet.add(VIDEO_SADNESS);
//         emotionSet.add(VIDEO_IDLE);
//         emotionSet.add(VIDEO_DISGUST);
//
//         var list = Array.from(emotionSet);
// // alert(list);
//
//         for(var i = 0 ;i < playerArray.length; ++i){
//             $("#video" +(i+1)).hide();
//         }
//         playIndex = 0;
//         playRecursively(list);
//     },5000)

</script>
</body>
</html>